<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性03</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
<!-- 准备好 一个容器-->
<div id="root">
    姓：<input type="text" v-model="firstName"><br/>
    名：<input type="text" v-model="lastName"><br/>
    全名：<span>{{fullName}}</span>
</div>
<!--
        计算属性：
            1.定义：要用的属性不存在，要通过已有的属性计算而来的全新属性
            2.原理：底层借助了Object.defineProperty方法提更的getter和setter。
            3.get函数什么时候执行
                a.初次读取时会执行一次
                b.当依赖的数据发生变化时会再次被调用
            4.优势：与methods相比，内部有缓存机制，效率更高，调试方便
            5.备注：
                1.计算属性最终会出现在vm身上，直接读取使用即可
                2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
-->


<script type="text/javascript">
  Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

  //创建Vue实例
  const vm = new Vue({
    el:'#root',
      data:{
        firstName:'张',
        lastName:'三'
      },
      computed:{
        fullName:{
            //get的作用 ：当有人读取fullname时，get就会被调用，且返回值就是fullname 的值

            // get调用的时机 ： 1.初次读取fullname ，2.所依赖的数据发生变化时
            get(){
                // console.log('get了fullname')
                return this.firstName+'-'+this.lastName
            },
            //set调用的时机： 当fullname被修改的时候
            set(value){
                const arr = value.split('-')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        }
      }

  })

</script>

</body>
</html>
